<template>
  <van-row class="customer-sel-list">
    <van-row class="title">客户选择</van-row>
    <van-search
      v-model="keywords"
        show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-radio-group v-model="id">
      <LoadMore :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore" :page="page" :noData="noData">
          <van-radio :name="item.id" @click="onChange" v-for="(item,index) in list" :key="index" >{{item.userName}}</van-radio>
      </LoadMore>
    </van-radio-group>
  </van-row>
</template>

<script>
import LoadMore from "@/components/loadMore.vue";
export default {
  components: {
    LoadMore
  },
  data() {
    return {
      keywords:'',
      id:'',
      page:1,
      pageSize:20,
      noData: false, //分页暂无数据状态
      enableLoadMore: true, // 加载更多按钮是否展示
      list:[]
    };
  },
 
  mounted() {
     this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad(){
      let params={
         searchKey:this.keywords,
         pageNumber:this.page,
         pageSize:this.pageSize
      }
      this.$http('/business/business/article/employees',params).then((res) => {
          let list=res.records;
          if(list&&list.length<this.pageSize){
               this.noData = false;
               this.enableLoadMore = false;
            }
          this.list = [...this.list,...list];
      }) 
    },
    //上拉加载更多
    onLoadMore (done) {
        this.page++;
        if (this.enableLoadMore) {
          this.getLoad();
          done();
        }
    },
    //选中内容
    onChange(e){
      this.$emit('onCustomer',{
        id:this.id,
        list:this.list
      })
    },
    //搜索
    onSearch(){
       this.page=1;  
       this.enableLoadMore=true;
       this.noData = true;
       this.list=[];
       this.getLoad();
    }
   }
};
</script>

<style lang='less'>
@import "~@/assets/css/sidebar/index.less";
</style>